<script setup lang="ts">
/*
 * @description:订单表
 * @author: lxx
 * @date: 2025-8-9
 * @version: V1.0.0
 */
import { dataSaveApi } from '@/api/orders'
import type { ItemFormInt } from '@/api/orders/types'
import type { ItemFormInt as MemberItemFormInt } from '@/api/member/types'
import type { ItemFormInt as GoodsItemFormInt } from '@/api/goods/types'
import { useAddEdit } from '@/hooks/system/useFramework'
import SelectMember from '@/views/member/SelectMember.vue'
import SelectGoods from '@/views/goods/SelectGoods.vue'
import constants from '@/common/constant'
const dataFormRef = ref()
const formData = ref<ItemFormInt>({
  /** ID */
  id: -1,
  /** 会员id */
  memberId: null,
  /** r球镜 */
  sphereR: '',
  /** r柱镜 */
  cylinderR: '',
  /** r轴向 */
  axialR: '',
  /** r矫正视力 */
  correctedVisionR: '',
  /** l球镜 */
  sphereL: '',
  /** l柱镜 */
  cylinderL: '',
  /** l轴向 */
  axialL: '',
  /** l矫正视力 */
  correctedVisionL: '',
  /** PD(单位m/m) */
  glassesPd: '',
  /** ADD (单位m/m) */
  glassesAdd: '',
  /** 眼镜类型 */
  glassesType: '',
  /** 取镜日期 */
  getGlassesDate: '',
  /** 镜架 */
  spectaclesFrame: null,
  /** 镜片 */
  eyeglass: '',
  /** 实际金额 */
  orderMoney: 0,
  /** 备注 */
  memo: '',
  memberUsername: '',
  memberPhone: '',
  goodsSpecs: '',
  goodsModel: '',
  goodsName: ''
})

// 会员信息
const memberItem = ref<MemberItemFormInt>({
  id: null,
  // 姓名
  username: '',
  // 电话
  phone: '',
  // 性别
  sex: '',
  // 会员等级
  memberlevel: '',
  // 余额
  balance: ''
})
// 商品信息
const goodsItem = ref<GoodsItemFormInt>({
  id: null,
  // 商品名称
  goodName: '',
  // 单位
  goodUnit: '',
  // 库存数量
  goodNum: 0,
  // 价格
  goodPrice: 0,
  // 成本价
  goodCostPrice: 0,
  // 商品图片
  goodImgs: '',
  // 商品型号
  goodModel: '',
  // 商品类型（镜架 镜片等）
  goodType: '',
  // 规格
  goodSpecs: ''
})
watchEffect(() => {
  formData.value.memberId = memberItem.value?.id || null
  formData.value.spectaclesFrame = goodsItem.value?.id || null
})
watch(()=> goodsItem.value?.goodPrice, (newVal)=> {
  if(newVal) {
    formData.value.orderMoney = goodsItem.value.goodPrice
  }
})
// 修改时，赋值成功
const loadFormDataSuccess = (data: ItemFormInt) => {
  if (isEdit.value) {
    // 编辑回显会员信息和商品信息
    if (formData.value.memberId) {
      ;(memberItem.value as MemberItemFormInt).id = formData.value.memberId
      ;(memberItem.value as MemberItemFormInt).username = formData.value.memberUsername as string
      ;(memberItem.value as MemberItemFormInt).phone = formData.value.memberPhone as string
    }
    if (formData.value.goodsName) {
      ;(goodsItem.value as GoodsItemFormInt).id = formData.value.spectaclesFrame
      ;(goodsItem.value as GoodsItemFormInt).goodName = formData.value.goodsName
      ;(goodsItem.value as GoodsItemFormInt).goodModel = formData.value.goodsModel as string
      ;(goodsItem.value as GoodsItemFormInt).goodSpecs = formData.value.goodsSpecs as string
    }
  }
}
const { isEdit, loading, dialog, open, handleSubmitClick, handleCloseDialog } = useAddEdit<ItemFormInt>(
  dataSaveApi,
  formData,
  dataFormRef,
  loadFormDataSuccess
)
const rules = {
  /** 会员 */
  memberId: [{ required: true, message: '请选择会员', trigger: 'change' }],
  /** r球镜 */
  sphereR: [{ required: true, message: '请输入r球镜', trigger: 'blur' }],
  /** r柱镜 */
  cylinderR: [{ required: true, message: '请输入r柱镜', trigger: 'blur' }],
  /** r轴向 */
  axialR: [{ required: true, message: '请输入r轴向', trigger: 'blur' }],
  /** r矫正视力 */
  // correctedVisionR: [{ required: true, message: '请输入r矫正视力', trigger: 'blur' }],
  /** l球镜 */
  sphereL: [{ required: true, message: '请输入l球镜', trigger: 'blur' }],
  /** l柱镜 */
  cylinderL: [{ required: true, message: '请输入l柱镜', trigger: 'blur' }],
  /** l轴向 */
  axialL: [{ required: true, message: '请输入l轴向', trigger: 'blur' }],
  /** l矫正视力 */
  // correctedVisionL: [{ required: true, message: '请输入l矫正视力', trigger: 'blur' }],
  /** PD(单位m/m) */
  glassesPd: [{ required: true, message: '请输入PD(单位m/m)', trigger: 'blur' }],
  /** ADD (单位m/m) */
  glassesAdd: [{ required: true, message: '请输入ADD (单位m/m)', trigger: 'blur' }],
  /** 眼镜类型 */
  // glassesType: [{ required: true, message: '请输入眼镜类型', trigger: 'blur' }],
  /** 取镜日期 */
  getGlassesDate: [{ required: true, message: '请输入取镜日期', trigger: 'change' }],
  /** 镜架 */
  spectaclesFrame: [{ required: true, message: '请选择商品', trigger: 'change' }],
  /** 镜片 */
  eyeglass: [{ required: true, message: '请输入镜片', trigger: 'blur' }],
  /** 实际金额 */
  orderMoney: [{ required: true, message: '请输入实际金额', trigger: 'blur' }]
}

// 弹框关闭方法
const dialogClose = () => {
  memberItem.value = {
    id: null,
    // 姓名
    username: '',
    // 电话
    phone: '',
    // 性别
    sex: '',
    // 会员等级
    memberlevel: '',
    // 余额
    balance: ''
  }
  goodsItem.value = {
    id: null,
    // 商品名称
    goodName: '',
    // 单位
    goodUnit: '',
    // 库存数量
    goodNum: 0,
    // 价格
    goodPrice: 0,
    // 成本价
    goodCostPrice: 0,
    // 商品图片
    goodImgs: '',
    // 商品型号
    goodModel: '',
    // 商品类型（镜架 镜片等）
    goodType: '',
    // 规格
    goodSpecs: ''
  }

  nextTick(() => {
    handleCloseDialog()
  })
}

defineExpose({
  open
})
</script>
<template>
  <!--字典弹窗-->
  <el-dialog top="5vh" v-loading="loading" v-model="dialog.visible" :title="dialog.title" width="800px" @close="dialogClose">
    <div class="scroll" style="height: 73vh">
      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
        <el-card shadow="never" class="form-card">
          <template #header>
            <div class="card-header">
              <span>基本信息</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="会员信息" prop="memberId">
                <!-- <el-input v-model="formData.memberId" placeholder="请输入会员id" /> -->
                <SelectMember v-model="memberItem" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="取镜日期" prop="getGlassesDate">
                <el-date-picker
                  format="YYYY/MM/DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  v-model="formData.getGlassesDate"
                  type="datetime"
                  placeholder="请选择取镜日期"
                  size="default"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" class="form-card">
          <template #header>
            <div class="card-header">
              <span>眼部数据</span>
            </div>
          </template>

          <el-table :data="[{}]" class="eye-table" style="margin-bottom: 0" :show-header="true">
            <el-table-column label="R/L" width="60">
              <template #default>
                <div class="table-cell">R</div>
              </template>
            </el-table-column>
            <el-table-column label="球镜">
              <template #default>
                <el-form-item label-width="0" prop="sphereR">
                  <el-input v-model="formData.sphereR" placeholder="请输入r球镜" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="柱镜">
              <template #default>
                <el-form-item label-width="0" prop="cylinderR">
                  <el-input v-model="formData.cylinderR" placeholder="请输入r柱镜" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="轴向">
              <template #default>
                <el-form-item label-width="0" prop="axialR">
                  <el-input v-model="formData.axialR" placeholder="请输入r轴向" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="矫正视力">
              <template #default>
                <el-form-item label-width="0" prop="correctedVisionR">
                  <el-input v-model="formData.correctedVisionR" placeholder="请输入r矫正视力" />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>

          <el-table :data="[{}]" class="eye-table" :show-header="false">
            <el-table-column label="R/L" width="60">
              <template #default>
                <div class="table-cell">L</div>
              </template>
            </el-table-column>
            <el-table-column label="球镜">
              <template #default>
                <el-form-item label-width="0" prop="sphereL">
                  <el-input v-model="formData.sphereL" placeholder="请输入球镜" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="柱镜">
              <template #default>
                <el-form-item label-width="0" prop="cylinderL">
                  <el-input v-model="formData.cylinderL" placeholder="请输入柱镜" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="轴向">
              <template #default>
                <el-form-item label-width="0" prop="axialL">
                  <el-input v-model="formData.axialL" placeholder="请输入轴向" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="矫正视力">
              <template #default>
                <el-form-item label-width="0" prop="correctedVisionL">
                  <el-input v-model="formData.correctedVisionL" placeholder="请输入矫正视力" />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <el-card shadow="never" class="form-card">
          <template #header>
            <div class="card-header">
              <span>眼镜参数</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="PD值" prop="glassesPd">
                <el-input v-model="formData.glassesPd" placeholder="请输入PD(单位m/m)" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="ADD值" prop="glassesAdd">
                <el-input v-model="formData.glassesAdd" placeholder="请输入ADD (单位m/m)" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="商品" prop="spectaclesFrame">
                <!-- <el-input v-model="formData.spectaclesFrame" placeholder="请输入镜架" /> -->
                <SelectGoods v-model="goodsItem" :disabled="isEdit" />
                <!-- <Dict placeholder="请选择镜架" fill :code="constants.GLASSES_FRAME" v-model="formData.spectaclesFrame" type="select" /> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="镜片" prop="eyeglass">
                <el-input v-model="formData.eyeglass" placeholder="请输入镜片" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <!-- <el-col :span="12">
              <el-form-item label="眼镜类型" prop="glassesType">
                <Dict placeholder="请选择眼镜类型" fill :code="constants.GLASSES_TYPE" v-model="formData.glassesType" type="select" />
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-form-item label="实际金额" prop="orderMoney">
                <el-input v-model="formData.orderMoney" placeholder="请输入实际金额" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" class="form-card">
          <template #header>
            <div class="card-header">
              <span>其他信息</span>
            </div>
          </template>
          <el-form-item label="备注" prop="memo">
            <el-input v-model="formData.memo" type="textarea" :rows="3" placeholder="请输入备注" />
          </el-form-item>
        </el-card>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-show="!isEdit" type="warning" @click="handleSubmitClick(true)">连续添加</el-button>
        <el-button type="primary" @click="handleSubmitClick()">确 定</el-button>
        <el-button @click="handleCloseDialog()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.form-card {
  margin-bottom: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  :deep(.el-card__header) {
    padding: 12px 20px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
  }

  .card-header {
    font-weight: 600;
    color: #303133;
    font-size: 15px;
  }

  :deep(.el-card__body) {
    padding: 20px 20px 0;
  }
}

.eye-table {
  margin-bottom: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;

  :deep(.el-table__cell) {
    padding: 8px 0;
    border-right: 1px solid #ebeef5;

    &:last-child {
      border-right: none;
    }
  }

  :deep(.el-table__header-wrapper) {
    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 600;
      border-bottom: 1px solid #ebeef5;
    }
  }

  :deep(.el-table__row) {
    td {
      border-bottom: 1px solid #ebeef5;

      &:last-child {
        border-bottom: none;
      }
    }

    &:last-child {
      td {
        border-bottom: none;
      }
    }
  }

  .table-cell {
    padding: 0 12px;
    font-weight: 500;
    color: #606266;
  }

  :deep(.el-form-item) {
    margin-bottom: 0;
  }

  :deep(.el-form-item__content) {
    line-height: normal;
    padding: 0 8px;
  }

  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px transparent inset;

    &:hover {
      box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
    }

    &.is-focus {
      box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
    }
  }
}

.dialog-footer {
  text-align: right;
  padding: 12px 20px;
  border-top: 1px solid #ebeef5;
}

:deep(.el-dialog__body) {
  padding: 12px 20px 20px 20px;
}

:deep(.el-dialog__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

// 响应式优化
@media (max-width: 768px) {
  .eye-table {
    :deep(.el-table__cell) {
      padding: 6px 0;
    }

    .table-cell {
      padding: 0 8px;
      font-size: 13px;
    }
  }
}
</style>
